define(
['jquery', 'lodash', 'backbone', 'bootstrap', 'utils/tpl'],

function($, _, Backbone, Bootstrap, tpl) {

    var ListingView = Backbone.View.extend({

        tagName: "div",
        // Not required since 'div' is the default if no el or tagName specified
        initialize: function() {

            this.template = _.template(tpl.get('listing-details'));
            this.model.bind("change", this.render, this);
        },

        render: function(eventName) {
            this.$el.html(this.template(this.model.toJSON()));
            return this.el;
        },

        events: {
            "change input": "change",
            "click .delete": "deleteListing"
        },

        change: function(event) {
            var target = event.target;
            console.log('changing ' + target.id + ' from: ' + target.defaultValue + ' to: ' + target.value);
        },

        deleteListing: function() {
            this.model.destroy({
                success: function() {
                    alert('Listing deleted successfully');
                    window.history.back();
                }
            });
            return false;
        }

    });

    return ListingView;

});